<template>
  <div>
    <!-- 主体部分 -->
    <section class="main">
      <input id="toggle-all" class="toggle-all" type="checkbox" />
      <label for="toggle-all" @click="all">Mark all as complete</label>
      <ul class="todo-list">
        <!-- 当任务已完成，可以给 li 加上 completed 类，会让元素加上删除线 -->
        <li
          :class="{ completed: item.isDone }"
          v-for="item in list"
          :key="item.id"
          v-show="item.show"
        >
          <div class="view">
            <input
              class="toggle"
              type="checkbox"
              :checked="item.isDone"
              @change="change(item.id)"
            />
            <label>{{ item.name }}</label>
            <button class="destroy" @click="del(item.id)"></button>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
export default {
  //接受父组件传过来的值
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  methods: {
    //change事件，改变input的状态来实现isDone的变化
    change(id) {
      //   this.$emit("change", id);
      this.list.forEach((item) => {
        if (item.id === id) {
          item.isDone = !item.isDone;
        }
      });
    },
    //全选事件
    all() {
      const flag = this.list.some((item) => {
        return item.isDone === false;
      });
      this.list.forEach((item) => {
        item.isDone = flag;
      });
    },
    //删除事件
    del(id) {
      this.$emit("del", id);
    },
  },
};
</script>

<style>
</style>